//hook的类型
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';

function TsThree() {
  //useState,一般用推导出的类型就行。 也可以手动声明类型
  const [num, setNum] = useState<number>(1);
  //useEffect和useLayoutEffect没有类型
  useEffect(() => {}, []);
  useLayoutEffect(() => {}, []);

  //useRef
  //useRef可以保存DOM引用或者保存其他数据
  //所以类型两种
  //1.保存DOM引用的时候,参数需要传个null，否则会报错
  const ref = useRef<HTMLDivElement>(null);
  //2.保存别的内容的时候，不能传null,不然也会报错，说是 current 只读：
  const ref2 = useRef<{ num: number }>();
  ref2.current = { num: 2 };
  //传 null 就是 dom 引用，返回 RefObject，不传就是其他数据，返回 MutableRefObject。
  return (
    <>
      <div ref={ref}>ccc</div>
    </>
  );
}
